<template>
	<view>
		<block v-if="range">
			<navigator
				:url="'/pages/activity/detail?id='+item.id"
				hover-class="none"
				open-type="navigate"
				class="activity-item"
				v-for="(item ,index) in range"
				:key="index"
			>
				<image lazy-load class="text-middle bgcImg" :src="item.images[0]||''" mode="aspectFill" />
				<view class="info mar-t-10">
					<view class="title tq-text-line2">
						<text class="font-size-15 font-bold font-color-333 line13">{{item.name}}</text>
					</view>
					<view class="time mar-t-15 flex pad-r-10 align-center" >
						<view class="flex-1"><text class="font-size-12 font-color-555">{{transformTime(item.start_time) || ''}} 至 {{transformTime(item.end_time) ||''}}</text></view>
						<view class="status font-size-12 radius-5" v-if="item.status==1">{{item.status_text}}</view>
						<view class="over-status font-size-12 radius-5" v-else>{{item.status_text}}</view>
					</view>
				</view>
			</navigator>
		</block>
	</view>
</template>

<script>
export default {
	props: ['range'],

	mounted() {
		//	console.log(this.transformTime(1619766840))
	}
}
</script>

<style scoped>
.activity-item {
	margin-bottom: 40rpx;
	padding-bottom: 20rpx;
	background-color: white !important;
	border-radius: 20rpx;
	box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
	overflow: hidden;
	/* box-shadow: 2px 2px 5px #e7e5e5d3; */
}
.activity-item .bgcImg {
	height: 150px !important;
	/* background-color: #cccccc; */
	width: 100%;
}
.status{
	background-color: #FF4000;
	color: #fff;
	height: 1.5em;
	line-height: 1.5em;
	padding: 2px 10px;
}
.status.unstart{
	background-color: #0088ff;
	color: #fff;
	height: 1.5em;
	line-height: 1.5em;
	padding: 2px 10px;
}
.over-status{
	background-color: #A0A0A0;
	color: #fff;
	height: 1.5em;
	line-height: 1.5em;
	padding: 2px 10px;
	/* padding: 2px 10px; */
}
.activity-item .info{
	padding: 0 20rpx;
}
</style>